
<template>
    <div class="histogram-container">
        <div class="chart" id="chart_left1"></div>
    </div>
</template>

<script>
    // 政府部门大屏:左1柱状图 五种医疗废物总产量
    import { getAction } from '@/api/manage'
    export default {
        name: 'histogram',
        props: {
            // 父组件传递过来的值
            areaCode: {
                type: String,
                default: ''
            },
            areaLevel: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                mwData: [] // 医废重量
            }
        },
        mounted() {
            //参数赋值
            this.getDataSource()
        },
        watch: {
            // 如果 `areaCode` 发生改变，这个函数就会运行
            areaCode: function(newValue, oldValue) {
                this.getDataSource()
            },
        },
        methods: {
            //获取服务器的数据
            async getDataSource() {
                let params = {
                    areaCode: this.areaCode,
                    areaLevel: this.areaLevel
                }
                // console.log('[-----参数----]', params)
                let res = await getAction('/hc/Statistical/getCountyWasteSum', params)
                if (res && res.success) {
                    // console.log('[-----返回的数据----]', res.result)
                    let result = res.result || [];
                    let list = [
                        {
                            name : '感染性',
                            value : result.infectiousWeight || 0,
                            text : 'KG'
                        },
                        {
                            name : '损伤性',
                            value : result.traumaticWeight || 0,
                            text : 'KG'
                        },
                        {
                            name : '病理性',
                            value : result.pathologicalWeight || 0,
                            text : 'KG'
                        },
                        {
                            name : '药物性',
                            value : result.medicatedWeight || 0,
                            text : 'KG'
                        },
                        {
                            name : '化学性',
                            value : result.chemicalWeight || 0,
                            text : 'KG'
                        }
                    ];
                    list.forEach((item,index) => {
                        let value = parseFloat(item.value);
                        // value > 10000 kg|公斤
                        if(value > 10000){
                            item['weight'] = parseInt(value/1000);
                            item['text'] = '吨';
                        }else{
                            item['weight'] = value;
                            item['text'] = 'KG';
                        }
                    });
                    this.mwData = list;
                }
                this.getEchartLeft1()
            },

            //
            getEchartLeft1() {
                // 初始化echarts的实例对象
                let myChart = this.$echarts.init(document.getElementById('chart_left1'))
                // 颜色
                let colorArray = [
                    {
                        top: '#0076e7', //蓝
                        bottom: 'rgba(199,220,250,0.8)'
                    }, {
                        top: '#57CE77', //绿
                        bottom: 'rgba(207,252,215,0.8)'
                    },
                    {
                        top: '#C93513', //红
                        bottom: 'rgba(250,210,204,0.8)'
                    }, {
                        top: '#D1AD0B', //黄
                        bottom: 'rgba(248,230,201,0.8)'
                    },
                    {
                        top: '#575ac3', //紫
                        bottom: 'rgba(208,209,250,0.8)'
                    }
                ]
                let wasteList = [];
                this.mwData.forEach((item,index) => {
                    wasteList.push(item['name'])
                });

                let option = {
                    // 点击图表时提示的内容
                    tooltip: {
                        show: true,
                        formatter: function({ data }) {
                            let str = '';

                            if(data){
                                str = `${data.name}:${data.weight || 0} ${data.text || ''}`;
                            }
                            return str;
                        },
                    },
                    // 文本
                    grid: {
                        left: '0%',
                        top: '-10%',
                        right: '8%',
                        bottom: '8%',
                        containLabel: true
                    },

                    xAxis: {
                        type: 'value',
                        show: false,
                        position: 'top',
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    yAxis: [{
                        type: 'category',
                        axisTick: {
                            show: false,
                            alignWithLabel: false,
                            length: 5

                        },
                        'splitLine': { //网格线
                            'show': false
                        },
                        inverse: 'true', //排序
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: '#fff'

                            }
                        },
                        data: wasteList
                    }],
                    series: [{
                        name: '产量',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                formatter: function({ data }) {
                                    let str = '';
                                    if(data){
                                        str = `${data.weight || 0} ${data.text || ''}`;
                                    }
                                    return str;
                                },
                                textStyle: {
                                    color: '#FFF' //color of value
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                show: true,
                                color: function(params) {
                                    let num = colorArray.length
                                    return {
                                        type: 'linear',
                                        colorStops: [{
                                            offset: 0,
                                            color: colorArray[params.dataIndex % num].bottom
                                        }, {
                                            offset: 1,
                                            color: colorArray[params.dataIndex % num].top
                                        }, {
                                            offset: 0,
                                            color: colorArray[params.dataIndex % num].bottom
                                        }, {
                                            offset: 1,
                                            color: colorArray[params.dataIndex % num].top
                                        }, {
                                            offset: 0,
                                            color: colorArray[params.dataIndex % num].bottom
                                        }, {
                                            offset: 1,
                                            color: colorArray[params.dataIndex % num].top
                                        }, {
                                            offset: 0,
                                            color: colorArray[params.dataIndex % num].bottom
                                        }, {
                                            offset: 1,
                                            color: colorArray[params.dataIndex % num].top
                                        }, {
                                            offset: 0,
                                            color: colorArray[params.dataIndex % num].bottom
                                        }, {
                                            offset: 1,
                                            color: colorArray[params.dataIndex % num].top
                                        }, {
                                            offset: 0,
                                            color: colorArray[params.dataIndex % num].bottom
                                        }, {
                                            offset: 1,
                                            color: colorArray[params.dataIndex % num].top
                                        }]
                                        //globalCoord: false
                                    }
                                },
                                barBorderRadius: 70,
                                borderWidth: 0,
                                borderColor: '#FFF'
                            }
                        },
                        barGap: '0%',
                        barCategoryGap: '50%',
                        data: this.mwData
                    }]
                }
                myChart.setOption(option, true)
                window.addEventListener('resize', () => {
                    myChart.resize()
                })
            }
        }

    }
</script>

<style lang="less" scoped>
    .histogram-container {
        .chart {
            height: 3rem;
        }
    }
</style>
